<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="60px"><Header></Header></el-header>
          <el-main>
            <el-card class="box-card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>修改密码</span>
                </div>
              </template>
              <el-form ref="modifyForm" label-position="top" :rules="modifyFormRules" :model="modifyFormModel">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="modifyFormModel.account" readonly ></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="oldpassword">
                    <el-input v-model="modifyFormModel.oldpassword" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword1">
                    <el-input v-model="modifyFormModel.newpassword1" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="newpassword2">
                    <el-input v-model="modifyFormModel.newpassword2" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                    <el-button @click="clear">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'
import { ElMessage } from "element-plus";

export default {
    name: 'ModifyPasswordView',
    components: {
        NavMenu,
        Header
    },
    data() {
        var confirmPassword = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入确认密码'));
            } else if (value !== this.modifyFormModel.newpassword1) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        var newPassword = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入新密码'));
            } else if (value == this.modifyFormModel.oldpassword) {
            callback(new Error('新密码与旧密码相同'));
            } else {
            callback();
            }
        };
      return {
        modifyFormModel: {
            account: JSON.parse(sessionStorage.getItem('staff')).account,
            oldpassword: '',
            newpassword1: '',
            newpassword2: ''
        },
        //表单验证规则
        modifyFormRules: {
            oldpassword: {
            required: true, message: "请输入旧密码", trigger: 'blur'
            },
            newpassword1: {
            required: true, validator:newPassword,trigger: 'blur'
            },
            newpassword2: {
            required: true, validator:confirmPassword, trigger: 'blur'
            }
        },
      };
    },
    methods:{
        onSubmit(){
          var that=this;
            this.$refs.modifyForm.validate(valid => {
                if (valid) {
                    this.axios
                    .post("/api/auth/change", this.modifyFormModel)
                    .then(function(response){
                      console.log(response)
                      if(response.data.code==200){
                        ElMessage({type: 'success', message: "修改成功，请重新登陆"});
                        sessionStorage.removeItem("staff");
                        sessionStorage.clear();
                        that.$router.push({
                            name: "login",
                        });
                      }else{
                        ElMessage.error("修改失败");
                      }
                    })
                    .catch(function (error) {
                    console.log(error);
                    });
                } else {
                    ElMessage.error("请检查输入的信息！");
                }
            })
        },
        clear(){
            this.$refs['modifyForm'].resetFields();
        }
    },
    mounted(){
        //var a=sessionStorage.getItem('loginUser');
        //this.modifyFormModel.account=a.substring(a.indexOf(':"')+2,a.indexOf('",'));
    }
}
</script>

<style scoped>
:deep(.el-header) { 
  padding: 0;
}
.box-card{
  height: 500px;
}
.card-header{
    float: left;
    line-height: 0px;
    color: var(--el-text-color-regular);
}
.el-form{
    margin-left: 40px;
}
.el-input{
    width: 220px;
}
</style>
